﻿@namespace BlazorFluentUI.Lists
@inherits FluentUIComponentBase
@typeparam TItem

    <div class="ms-DetailsHeader-root"
         @ref=@RootElementReference>
        <FocusZone Role="row"
                      AriaLabel=@AriaLabel
                      ClassName=@($"ms-DetailsHeader{(IsAllSelected?" is-allSelected":"")}{(isResizingColumn?" is-resizingColumn":"")}")
                      Direction="FocusZoneDirection.Horizontal"
                      Style=@($"")>
            @if (showCheckbox)
            {
                <div class="ms-DetailsHeader-cellIsCheck"
                     aria-labelledby=@($"{id}-check")
                     @onclick=@OnSelectAllClicked
                     aria-colindex="1"
                     role="columnheader">
                    @if (ColumnHeaderTooltipTemplate != null)
                    {
                        @ColumnHeaderTooltipTemplate
                    }
                    else
                    {
                        // No tooltip is shown if you don't override ColumnHeaderTooltipTemplate and put in the TooltipHost
                        <span class="ms-DetailsHeader-checkTooltip">
                            <DetailsRowCheck Id=@($"{id}-check")
                                                AriaLabel=@(SelectionMode == SelectionMode.Multiple ? AriaLabelForSelectAllCheckbox : AriaLabelForSelectionColumn)
                                                AriaDescribedBy=@(!isCheckboxHidden
                                    ? !string.IsNullOrEmpty(AriaLabelForSelectAllCheckbox)
                                        ? $"{id}-checkTooltip"
                                        : null
                                    : !string.IsNullOrEmpty(AriaLabelForSelectionColumn)
                                    ? $"{id}-checkTooltip"
                                    : null)
                                                IsFocusable=@(!isCheckboxHidden)
                                                IsHeader="true"
                                                Checked=@IsAllSelected
                                                AnySelected="false"
                                                CanSelect=@(!isCheckboxHidden)
                                                ClassName="ms-DetailsHeader-check"
                                                UseFastIcons=@UseFastIcons
                                                IsVisible=@isCheckboxAlwaysVisible>
                            </DetailsRowCheck>
                        </span>
                    }
                </div>
            }
            @if (GroupNestingDepth > 0 && CollapseAllVisibility == CollapseAllVisibility.Visible)
            {
                <div class="ms-DetailsHeader-cellIsGroupExpander"
                     @onclick=@OnToggleCollapseAll
                     data-is-focusable="true"
                     aria-label=@AriaLabelForToggleAllGroup
                     aria-expanded=@(!IsAllCollapsed)
                     role=@(!string.IsNullOrEmpty(AriaLabelForToggleAllGroup) ? "button" : null)>
                    @if (UseFastIcons)
                    {
                        <FontIcon ClassName=@($"ms-DetailsHeader-collapseButton{(IsAllCollapsed ? " is-collapsed":"")}")
                                     IconName="ChevronRightMed" />
                    }
                    else
                    {
                        <Icon ClassName=@($"ms-DetailsHeader-collapseButton{(IsAllCollapsed ? " is-collapsed":"")}")
                                 IconName="ChevronRightMed" />
                    }
                </div>
            }
            <GroupSpacer IndentWidth=@IndentWidth
                            Count=@(GroupNestingDepth-1) />
            @for (var colIndex = 0; colIndex < Columns?.Count(); colIndex++)
            {
                var currentColIndex = colIndex;
                var isDraggable = (ColumnReorderProps != null) ? currentColIndex >= frozenColumnCountFromStart && currentColIndex < Columns.Count()  : false;
                @if (isDraggable || currentColIndex == Columns.Count() )
                {
                    <div class="ms-DetailsHeader-dropHint"
                         id=@($"columnDropHint_{currentColIndex}")>
                        @if (UseFastIcons)
                        {
                            <FontIcon ClassName="ms-DetailsHeader-dropHintCaret"
                                         AriaHidden="true"
                                         IconName="CircleShapeSolid"
                                         data-sizer-index=@currentColIndex
                                         data-is-focusable="false"/>
                        }
                        else
                        {
                            <Icon ClassName="ms-DetailsHeader-dropHintCaret"
                                     AriaHidden="true"
                                     IconName="CircleShapeSolid"
                                     data-sizer-index=@currentColIndex
                                     data-is-focusable="false"/>
                        }
                        <div aria-hidden="true"
                             class="ms-DetailsHeader-dropHintLine"
                             data-sizer-index=@currentColIndex
                             data-is-focusable="false"/>
                    </div>
                }
                <DetailsColumn Column=@Columns.ElementAt(currentColIndex)
                                  ColumnIndex=@((showCheckbox ? 2 : 1) + currentColIndex)
                                  ParentId=@id
                                  IsDraggable=@isDraggable
                                  UpdateDragInfo=@UpdateDragInfo
                                  DragDropHelper=null
                                  OnColumnClick=@OnColumnClick
                                  OnColumnContextMenu=@OnColumnContextMenu
                                  ColumnHeaderTooltipTemplate=@ColumnHeaderTooltipTemplate
                                  IsDropped=@(onDropIndexInfo.TargetIndex == currentColIndex)
                                  UseFastIcons=@UseFastIcons />
                @if (Columns.ElementAt(currentColIndex).IsResizable)
                {
                    <div aria-hidden="true"
                         role="button"
                         @onblur=@(() => { })
                         data-sizer-index=@currentColIndex
                         class=@($"ms-DetailsHeader-cellSizer{(currentColIndex < Columns.Count() - 1 ? " ms-DetailsHeader-cellSizerStart" : " ms-DetailsHeader-cellSizerEnd")}{(isSizing && resizeColumnIndex == currentColIndex ? " is-resizing" : "")}")
                        
                         @ondblclick=@((args) =>
                                       {
                                           //System.Diagnostics.Debug.WriteLine("DoubleClick happened.");
                                           //OnColumnAutoResized.InvokeAsync(new ItemContainer<DetailsRowColumn<TItem>> { Item = Columns.ElementAt(currentColIndex), Index = currentColIndex });
                                       })
                          @onmousedown=@(args =>
                                        {
                                            OnSizerMouseDown(currentColIndex, args.ClientX);
                                        })
                         />
                }
            }
            @if (ColumnReorderProps != null )
            {
                <div class="ms-DetailsHeader-dropHint"
                     id=@($"columnDropHint_{Columns?.Count()}")>
                    @if (UseFastIcons)
                    {
                        <FontIcon ClassName="ms-DetailsHeader-dropHintCaret"
                                     AriaHidden="true"
                                     IconName="CircleShapeSolid" 
                                     data-sizer-index=@Columns?.Count()
                                     data-is-focusable="false"
                                     />
                    }
                    else
                    {
                        <Icon ClassName="ms-DetailsHeader-dropHintCaret"
                                 AriaHidden="true"
                                 IconName="CircleShapeSolid"
                                 data-sizer-index=@Columns?.Count()
                                 data-is-focusable="false"
                                 />
                    }
                    <div aria-hidden="true"
                         data-sizer-index=@Columns?.Count()
                         data-is-focusable="false"
                         class="ms-DetailsHeader-dropHintLine" />
                </div>
            }
            @if (isSizing)
            {
                <Layer>
                    <div class=@($"ms-DetailsHeader-sizingOverlay{(isSizing ? " is-sizing": "")}")
                         @onmousemove=@OnSizerMouseMove
                         @onmouseup=@OnSizerMouseUp></div>
                </Layer>
            }

        </FocusZone>
    </div>